import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:gourmet/color/hex.dart';
import 'package:gourmet/route/index.dart';
import 'package:gourmet/utils/colors.dart';
import 'package:gourmet/utils/styles.dart';
import 'package:gourmet/utils/svg.dart';

class OrderPaymentSuccessController extends GetxController {
  final double expandedHeight = 68.0;
  late ScrollController scrollController;

  RxDouble opacity = RxDouble(0);

  @override
  void onInit() {
    scrollController = ScrollController()
      ..addListener(() {
        double opacity = (scrollController.offset / expandedHeight).clamp(0, 1);
        if (opacity < 0.2) {
          this.opacity.value = 0;
        } else {
          this.opacity.value = opacity;
        }
      });
    super.onInit();
  }

  @override
  void onClose() {
    scrollController.dispose();
    super.onClose();
  }
}

class OrderPaymentSuccessPage extends GetView<OrderPaymentSuccessController> {
  const OrderPaymentSuccessPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: HexColor(ColorsUtils.colorF7f7),
      body: CustomScrollView(
        controller: controller.scrollController,
        slivers: [
          MediaQuery.removeViewPadding(
            context: context,
            removeBottom: true,
            removeLeft: true,
            removeRight: true,
            removeTop: true,
            child: SliverAppBar(
              pinned: true,
              automaticallyImplyLeading: false,
              backgroundColor: HexColor(ColorsUtils.colorF7f7),
              expandedHeight: controller.expandedHeight,
              flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                titlePadding: EdgeInsets.zero,
                expandedTitleScale: 1,
                title: Obx(() => Opacity(
                      opacity: controller.opacity.value,
                      child: Center(
                        child: Text(
                          '支付成功',
                          style: StylesUtils.customTextStyle(
                              fontSize: StylesUtils.fontSize16,
                              color: ColorsUtils.color0000),
                        ),
                      ),
                    )),
                background: Container(
                  padding: EdgeInsets.only(top: Get.mediaQuery.padding.top),
                  alignment: Alignment.topCenter,
                  child: Wrap(
                    spacing: 10,
                    crossAxisAlignment: WrapCrossAlignment.center,
                    alignment: WrapAlignment.center,
                    children: [
                      Icon(
                        CupertinoIcons.checkmark_alt_circle_fill,
                        size: 30,
                        color: HexColor(ColorsUtils.color63b5),
                      ),
                      Text('支付成功',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color0000,
                              fontSize: StylesUtils.fontSize22))
                    ],
                  ),
                ),
              ),
              systemOverlayStyle: SystemUiOverlayStyle.dark,
            ),
          ),
          SliverToBoxAdapter(
            child: Column(
              children: [
                Container(
                  alignment: Alignment.center,
                  child: Wrap(
                    spacing: 25,
                    crossAxisAlignment: WrapCrossAlignment.center,
                    alignment: WrapAlignment.center,
                    children: [
                      TextButton(
                          onPressed: () {
                            Get.toNamed(Routes.orderInfoPrepare);
                          },
                          style: ButtonStyle(
                              fixedSize:
                                  const WidgetStatePropertyAll(Size(100, 35)),
                              minimumSize:
                                  const WidgetStatePropertyAll(Size(100, 35)),
                              backgroundColor: const WidgetStatePropertyAll(
                                  Colors.transparent),
                              overlayColor: const WidgetStatePropertyAll(
                                  Colors.transparent),
                              shape: WidgetStatePropertyAll(
                                  RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(18),
                                      side: BorderSide(
                                          color: HexColor(
                                              ColorsUtils.color9999)))),
                              alignment: Alignment.center),
                          child: Text(
                            '查看订单',
                            style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize15,
                                color: ColorsUtils.color0000),
                          )),
                      TextButton(
                          onPressed: () {
                            Get.toNamed(Routes.home);
                          },
                          style: ButtonStyle(
                              fixedSize:
                                  const WidgetStatePropertyAll(Size(100, 35)),
                              minimumSize:
                                  const WidgetStatePropertyAll(Size(100, 35)),
                              backgroundColor: const WidgetStatePropertyAll(
                                  Colors.transparent),
                              overlayColor: const WidgetStatePropertyAll(
                                  Colors.transparent),
                              shape: WidgetStatePropertyAll(
                                  RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(18),
                                      side: BorderSide(
                                          color: HexColor(
                                              ColorsUtils.color9999)))),
                              alignment: Alignment.center),
                          child: Text(
                            '返回首页',
                            style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize15,
                                color: ColorsUtils.color0000),
                          )),
                    ],
                  ),
                ),
                Container(
                  margin: const EdgeInsets.only(bottom: 15, top: 15),
                  child: Text.rich(TextSpan(
                      style: StylesUtils.customTextStyle(
                          fontWeight: FontWeight.w700,
                          color: ColorsUtils.color0000,
                          fontSize: StylesUtils.fontSize18),
                      children: [
                        const TextSpan(
                          text: '为',
                        ),
                        TextSpan(
                            text: '/',
                            style: StylesUtils.customTextStyle(
                                fontWeight: FontWeight.w700,
                                color: ColorsUtils.colorCccc,
                                fontSize: StylesUtils.fontSize18)),
                        const TextSpan(
                          text: '您',
                        ),
                        TextSpan(
                            text: '/',
                            style: StylesUtils.customTextStyle(
                                fontWeight: FontWeight.w700,
                                color: ColorsUtils.colorCccc,
                                fontSize: StylesUtils.fontSize18)),
                        const TextSpan(
                          text: '推',
                        ),
                        TextSpan(
                            text: '/',
                            style: StylesUtils.customTextStyle(
                                fontWeight: FontWeight.w700,
                                color: ColorsUtils.colorCccc,
                                fontSize: StylesUtils.fontSize18)),
                        const TextSpan(
                          text: '荐',
                        ),
                      ])),
                ),
                StaggeredGrid.count(
                  crossAxisCount: 2,
                  crossAxisSpacing: 10,
                  mainAxisSpacing: 15,
                  children: [
                    Align(
                      alignment: Alignment.centerRight,
                      child: GestureDetector(
                        onTap: () {},
                        child: Container(
                          width: 167,
                          padding: const EdgeInsets.only(bottom: 10),
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(10),
                              color: Colors.white),
                          child: Column(
                            children: [
                              Container(
                                constraints: const BoxConstraints.expand(
                                    width: 167, height: 165),
                                decoration: const BoxDecoration(
                                    borderRadius: BorderRadius.vertical(
                                        top: Radius.circular(10)),
                                    image: DecorationImage(
                                        image: NetworkImage(
                                            'https://img1.baidu.com/it/u=3316024464,3222833970&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'),
                                        fit: BoxFit.fill)),
                              ),
                              Container(
                                padding: const EdgeInsets.only(
                                    left: 10, right: 10, top: 15),
                                child: Column(
                                  children: [
                                    Align(
                                      alignment: Alignment.centerLeft,
                                      child: Text(
                                        '麦香鸡脚汉堡',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: StylesUtils.fontSize15,
                                            fontWeight: FontWeight.w700,
                                            color: ColorsUtils.color0000),
                                      ),
                                    ),
                                    Padding(
                                      padding: const EdgeInsets.symmetric(
                                          vertical: 10),
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                        children: [
                                          Text(
                                            '￥ 18',
                                            softWrap: true,
                                            style: StylesUtils.customTextStyle(
                                                fontSize:
                                                    StylesUtils.fontSize16,
                                                color: ColorsUtils.colorFf64,
                                                fontWeight: FontWeight.w700),
                                          ),
                                          Text(
                                            '月销509',
                                            softWrap: true,
                                            style: StylesUtils.customTextStyle(
                                                color: ColorsUtils.color7979,
                                                fontSize:
                                                    StylesUtils.fontSize12),
                                          )
                                        ],
                                      ),
                                    ),
                                    Container(
                                      alignment: Alignment.centerLeft,
                                      padding: const EdgeInsets.only(
                                          bottom: 10, top: 5),
                                      child: Text(
                                        '附近热销商品',
                                        softWrap: true,
                                        style: StylesUtils.customTextStyle(
                                            color: ColorsUtils.color7979,
                                            fontSize: StylesUtils.fontSize12),
                                      ),
                                    ),
                                    Center(
                                      widthFactor: 0.75,
                                      child: Container(
                                        height: 1,
                                        color: HexColor(ColorsUtils.colorF5f5),
                                      ),
                                    ),
                                    Container(
                                      margin: const EdgeInsets.only(top: 10),
                                      alignment: Alignment.centerLeft,
                                      child: Text.rich(TextSpan(children: [
                                        WidgetSpan(
                                            child: SvgUtils.assetName('u988',
                                                width: 12, height: 12),
                                            alignment:
                                                PlaceholderAlignment.middle),
                                        TextSpan(
                                            text: ' 华莱士-凤凰广场2店 ',
                                            style: StylesUtils.customTextStyle(
                                                fontSize:
                                                    StylesUtils.fontSize12,
                                                color: ColorsUtils.color0000)),
                                        WidgetSpan(
                                            child: Icon(
                                              CupertinoIcons.chevron_forward,
                                              size: 12,
                                              color: HexColor(
                                                  ColorsUtils.color9999),
                                            ),
                                            alignment:
                                                PlaceholderAlignment.middle)
                                      ])),
                                    ),
                                    Container(
                                      margin: const EdgeInsets.only(top: 10),
                                      alignment: Alignment.centerLeft,
                                      child: Text.rich(TextSpan(children: [
                                        TextSpan(
                                          text: '20分钟 ',
                                          style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize12,
                                              color: ColorsUtils.color7979),
                                        ),
                                        TextSpan(
                                            text: '|',
                                            style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.colorCccc,
                                              fontSize: StylesUtils.fontSize12,
                                            )),
                                        TextSpan(
                                            text: '配送￥4起',
                                            style: StylesUtils.customTextStyle(
                                                fontSize:
                                                    StylesUtils.fontSize12,
                                                color: ColorsUtils.color7979))
                                      ])),
                                    )
                                  ],
                                ),
                              )
                            ],
                          ),
                        ),
                      ),
                    ),
                    Align(
                      alignment: Alignment.centerLeft,
                      child: Container(
                        width: 167,
                        padding: const EdgeInsets.only(bottom: 10),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10),
                            color: Colors.white),
                        child: Column(
                          children: [
                            Container(
                              constraints: const BoxConstraints.expand(
                                  width: 167, height: 165),
                              decoration: const BoxDecoration(
                                  borderRadius: BorderRadius.vertical(
                                      top: Radius.circular(10)),
                                  image: DecorationImage(
                                      image: NetworkImage(
                                          'https://img1.baidu.com/it/u=3316024464,3222833970&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'),
                                      fit: BoxFit.fill)),
                            ),
                            Container(
                              padding: const EdgeInsets.only(
                                  left: 10, right: 10, top: 15),
                              child: Column(
                                children: [
                                  Align(
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '麦香鸡脚汉堡',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize15,
                                          fontWeight: FontWeight.w700,
                                          color: ColorsUtils.color0000),
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.symmetric(
                                        vertical: 10),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Text(
                                          '￥ 18',
                                          softWrap: true,
                                          style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize16,
                                              color: ColorsUtils.colorFf64,
                                              fontWeight: FontWeight.w700),
                                        ),
                                        Text(
                                          '月销509',
                                          softWrap: true,
                                          style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.color7979,
                                              fontSize: StylesUtils.fontSize12),
                                        )
                                      ],
                                    ),
                                  ),
                                  Container(
                                    alignment: Alignment.centerLeft,
                                    padding: const EdgeInsets.only(
                                        bottom: 10, top: 5),
                                    child: Text(
                                      '附近热销商品',
                                      softWrap: true,
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color7979,
                                          fontSize: StylesUtils.fontSize12),
                                    ),
                                  ),
                                  Center(
                                    widthFactor: 0.75,
                                    child: Container(
                                      height: 1,
                                      color: HexColor(ColorsUtils.colorF5f5),
                                    ),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(top: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text.rich(TextSpan(children: [
                                      WidgetSpan(
                                          child: SvgUtils.assetName('u988',
                                              width: 12, height: 12),
                                          alignment:
                                              PlaceholderAlignment.middle),
                                      TextSpan(
                                          text: ' 华莱士-凤凰广场2店 ',
                                          style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize12,
                                              color: ColorsUtils.color0000)),
                                      WidgetSpan(
                                          child: Icon(
                                            CupertinoIcons.chevron_forward,
                                            size: 12,
                                            color:
                                                HexColor(ColorsUtils.color9999),
                                          ),
                                          alignment:
                                              PlaceholderAlignment.middle)
                                    ])),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(top: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text.rich(TextSpan(children: [
                                      TextSpan(
                                        text: '20分钟 ',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: StylesUtils.fontSize12,
                                            color: ColorsUtils.color7979),
                                      ),
                                      TextSpan(
                                          text: '|',
                                          style: StylesUtils.customTextStyle(
                                            color: ColorsUtils.colorCccc,
                                            fontSize: StylesUtils.fontSize12,
                                          )),
                                      TextSpan(
                                          text: '配送￥4起',
                                          style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize12,
                                              color: ColorsUtils.color7979))
                                    ])),
                                  )
                                ],
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                    Align(
                      alignment: Alignment.centerRight,
                      child: Container(
                        width: 167,
                        padding: const EdgeInsets.only(bottom: 10),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10),
                            color: Colors.white),
                        child: Column(
                          children: [
                            Container(
                              constraints: const BoxConstraints.expand(
                                  width: 167, height: 165),
                              decoration: const BoxDecoration(
                                  borderRadius: BorderRadius.vertical(
                                      top: Radius.circular(10)),
                                  image: DecorationImage(
                                      image: NetworkImage(
                                          'https://img2.baidu.com/it/u=4212075512,1580634758&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'),
                                      fit: BoxFit.fill)),
                            ),
                            Container(
                              padding: const EdgeInsets.only(
                                  left: 10, right: 10, top: 15),
                              child: Column(
                                children: [
                                  Align(
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '百事可乐（小杯）',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize15,
                                          fontWeight: FontWeight.w700,
                                          color: ColorsUtils.color0000),
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.symmetric(
                                        vertical: 10),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Text(
                                          '￥ 18',
                                          softWrap: true,
                                          style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize16,
                                              color: ColorsUtils.colorFf64,
                                              fontWeight: FontWeight.w700),
                                        ),
                                        Text(
                                          '月销509',
                                          softWrap: true,
                                          style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.color7979,
                                              fontSize: StylesUtils.fontSize12),
                                        )
                                      ],
                                    ),
                                  ),
                                  Container(
                                    alignment: Alignment.centerLeft,
                                    padding: const EdgeInsets.only(
                                        bottom: 10, top: 5),
                                    child: Text(
                                      '附近热销商品',
                                      softWrap: true,
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color7979,
                                          fontSize: StylesUtils.fontSize12),
                                    ),
                                  ),
                                  Center(
                                    widthFactor: 0.75,
                                    child: Container(
                                      height: 1,
                                      color: HexColor(ColorsUtils.colorF5f5),
                                    ),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(top: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text.rich(TextSpan(children: [
                                      WidgetSpan(
                                          child: SvgUtils.assetName('u988',
                                              width: 12, height: 12),
                                          alignment:
                                              PlaceholderAlignment.middle),
                                      TextSpan(
                                          text: ' 华莱士-凤凰广场2店 ',
                                          style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize12,
                                              color: ColorsUtils.color0000)),
                                      WidgetSpan(
                                          child: Icon(
                                            CupertinoIcons.chevron_forward,
                                            size: 12,
                                            color:
                                                HexColor(ColorsUtils.color9999),
                                          ),
                                          alignment:
                                              PlaceholderAlignment.middle)
                                    ])),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(top: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text.rich(TextSpan(children: [
                                      TextSpan(
                                        text: '20分钟 ',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: StylesUtils.fontSize12,
                                            color: ColorsUtils.color7979),
                                      ),
                                      TextSpan(
                                          text: '|',
                                          style: StylesUtils.customTextStyle(
                                            color: ColorsUtils.colorCccc,
                                            fontSize: StylesUtils.fontSize12,
                                          )),
                                      TextSpan(
                                          text: '配送￥4起',
                                          style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize12,
                                              color: ColorsUtils.color7979))
                                    ])),
                                  )
                                ],
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                    Align(
                      alignment: Alignment.centerLeft,
                      child: Container(
                        width: 167,
                        padding: const EdgeInsets.only(bottom: 10),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10),
                            color: Colors.white),
                        child: Column(
                          children: [
                            Container(
                              constraints: const BoxConstraints.expand(
                                  width: 167, height: 165),
                              decoration: const BoxDecoration(
                                  borderRadius: BorderRadius.vertical(
                                      top: Radius.circular(10)),
                                  image: DecorationImage(
                                      image: NetworkImage(
                                          'https://img2.baidu.com/it/u=2154553597,2576787779&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666'),
                                      fit: BoxFit.fill)),
                            ),
                            Container(
                              padding: const EdgeInsets.only(
                                  left: 10, right: 10, top: 15),
                              child: Column(
                                children: [
                                  Align(
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '百世可乐（中杯）',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize15,
                                          fontWeight: FontWeight.w700,
                                          color: ColorsUtils.color0000),
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.symmetric(
                                        vertical: 10),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Text(
                                          '￥ 18',
                                          softWrap: true,
                                          style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize16,
                                              color: ColorsUtils.colorFf64,
                                              fontWeight: FontWeight.w700),
                                        ),
                                        Text(
                                          '月销509',
                                          softWrap: true,
                                          style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.color7979,
                                              fontSize: StylesUtils.fontSize12),
                                        )
                                      ],
                                    ),
                                  ),
                                  Container(
                                    alignment: Alignment.centerLeft,
                                    padding: const EdgeInsets.only(
                                        bottom: 10, top: 5),
                                    child: Text(
                                      '附近热销商品',
                                      softWrap: true,
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color7979,
                                          fontSize: StylesUtils.fontSize12),
                                    ),
                                  ),
                                  Center(
                                    widthFactor: 0.75,
                                    child: Container(
                                      height: 1,
                                      color: HexColor(ColorsUtils.colorF5f5),
                                    ),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(top: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text.rich(TextSpan(children: [
                                      WidgetSpan(
                                          child: SvgUtils.assetName('u988',
                                              width: 12, height: 12),
                                          alignment:
                                              PlaceholderAlignment.middle),
                                      TextSpan(
                                          text: ' 华莱士-凤凰广场2店 ',
                                          style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize12,
                                              color: ColorsUtils.color0000)),
                                      WidgetSpan(
                                          child: Icon(
                                            CupertinoIcons.chevron_forward,
                                            size: 12,
                                            color:
                                                HexColor(ColorsUtils.color9999),
                                          ),
                                          alignment:
                                              PlaceholderAlignment.middle)
                                    ])),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(top: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text.rich(TextSpan(children: [
                                      TextSpan(
                                        text: '20分钟 ',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: StylesUtils.fontSize12,
                                            color: ColorsUtils.color7979),
                                      ),
                                      TextSpan(
                                          text: '|',
                                          style: StylesUtils.customTextStyle(
                                            color: ColorsUtils.colorCccc,
                                            fontSize: StylesUtils.fontSize12,
                                          )),
                                      TextSpan(
                                          text: '配送￥4起',
                                          style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize12,
                                              color: ColorsUtils.color7979))
                                    ])),
                                  )
                                ],
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                    Align(
                      alignment: Alignment.centerRight,
                      child: Container(
                        width: 167,
                        padding: const EdgeInsets.only(bottom: 10),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10),
                            color: Colors.white),
                        child: Column(
                          children: [
                            Container(
                              constraints: const BoxConstraints.expand(
                                  width: 167, height: 165),
                              decoration: const BoxDecoration(
                                  borderRadius: BorderRadius.vertical(
                                      top: Radius.circular(10)),
                                  image: DecorationImage(
                                      image: NetworkImage(
                                          'https://img1.baidu.com/it/u=3316024464,3222833970&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'),
                                      fit: BoxFit.fill)),
                            ),
                            Container(
                              padding: const EdgeInsets.only(
                                  left: 10, right: 10, top: 15),
                              child: Column(
                                children: [
                                  Align(
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '麦香鸡脚汉堡',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize15,
                                          fontWeight: FontWeight.w700,
                                          color: ColorsUtils.color0000),
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.symmetric(
                                        vertical: 10),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Text(
                                          '￥ 18',
                                          softWrap: true,
                                          style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize16,
                                              color: ColorsUtils.colorFf64,
                                              fontWeight: FontWeight.w700),
                                        ),
                                        Text(
                                          '月销509',
                                          softWrap: true,
                                          style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.color7979,
                                              fontSize: StylesUtils.fontSize12),
                                        )
                                      ],
                                    ),
                                  ),
                                  Container(
                                    alignment: Alignment.centerLeft,
                                    padding: const EdgeInsets.only(
                                        bottom: 10, top: 5),
                                    child: Text(
                                      '附近热销商品',
                                      softWrap: true,
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color7979,
                                          fontSize: StylesUtils.fontSize12),
                                    ),
                                  ),
                                  Center(
                                    widthFactor: 0.75,
                                    child: Container(
                                      height: 1,
                                      color: HexColor(ColorsUtils.colorF5f5),
                                    ),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(top: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text.rich(TextSpan(children: [
                                      WidgetSpan(
                                          child: SvgUtils.assetName('u988',
                                              width: 12, height: 12),
                                          alignment:
                                              PlaceholderAlignment.middle),
                                      TextSpan(
                                          text: ' 华莱士-凤凰广场2店 ',
                                          style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize12,
                                              color: ColorsUtils.color0000)),
                                      WidgetSpan(
                                          child: Icon(
                                            CupertinoIcons.chevron_forward,
                                            size: 12,
                                            color:
                                                HexColor(ColorsUtils.color9999),
                                          ),
                                          alignment:
                                              PlaceholderAlignment.middle)
                                    ])),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(top: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text.rich(TextSpan(children: [
                                      TextSpan(
                                        text: '20分钟 ',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: StylesUtils.fontSize12,
                                            color: ColorsUtils.color7979),
                                      ),
                                      TextSpan(
                                          text: '|',
                                          style: StylesUtils.customTextStyle(
                                            color: ColorsUtils.colorCccc,
                                            fontSize: StylesUtils.fontSize12,
                                          )),
                                      TextSpan(
                                          text: '配送￥4起',
                                          style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize12,
                                              color: ColorsUtils.color7979))
                                    ])),
                                  )
                                ],
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                    Align(
                      alignment: Alignment.centerLeft,
                      child: Container(
                        width: 167,
                        padding: const EdgeInsets.only(bottom: 10),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10),
                            color: Colors.white),
                        child: Column(
                          children: [
                            Container(
                              constraints: const BoxConstraints.expand(
                                  width: 167, height: 165),
                              decoration: const BoxDecoration(
                                  borderRadius: BorderRadius.vertical(
                                      top: Radius.circular(10)),
                                  image: DecorationImage(
                                      image: NetworkImage(
                                          'https://img1.baidu.com/it/u=3316024464,3222833970&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'),
                                      fit: BoxFit.fill)),
                            ),
                            Container(
                              padding: const EdgeInsets.only(
                                  left: 10, right: 10, top: 15),
                              child: Column(
                                children: [
                                  Align(
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '麦香鸡脚汉堡',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize15,
                                          fontWeight: FontWeight.w700,
                                          color: ColorsUtils.color0000),
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.symmetric(
                                        vertical: 10),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Text(
                                          '￥ 18',
                                          softWrap: true,
                                          style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize16,
                                              color: ColorsUtils.colorFf64,
                                              fontWeight: FontWeight.w700),
                                        ),
                                        Text(
                                          '月销509',
                                          softWrap: true,
                                          style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.color7979,
                                              fontSize: StylesUtils.fontSize12),
                                        )
                                      ],
                                    ),
                                  ),
                                  Container(
                                    alignment: Alignment.centerLeft,
                                    padding: const EdgeInsets.only(
                                        bottom: 10, top: 5),
                                    child: Text(
                                      '附近热销商品',
                                      softWrap: true,
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color7979,
                                          fontSize: StylesUtils.fontSize12),
                                    ),
                                  ),
                                  Center(
                                    widthFactor: 0.75,
                                    child: Container(
                                      height: 1,
                                      color: HexColor(ColorsUtils.colorF5f5),
                                    ),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(top: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text.rich(TextSpan(children: [
                                      WidgetSpan(
                                          child: SvgUtils.assetName('u988',
                                              width: 12, height: 12),
                                          alignment:
                                              PlaceholderAlignment.middle),
                                      TextSpan(
                                          text: ' 华莱士-凤凰广场2店 ',
                                          style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize12,
                                              color: ColorsUtils.color0000)),
                                      WidgetSpan(
                                          child: Icon(
                                            CupertinoIcons.chevron_forward,
                                            size: 12,
                                            color:
                                                HexColor(ColorsUtils.color9999),
                                          ),
                                          alignment:
                                              PlaceholderAlignment.middle)
                                    ])),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(top: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text.rich(TextSpan(children: [
                                      TextSpan(
                                        text: '20分钟 ',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: StylesUtils.fontSize12,
                                            color: ColorsUtils.color7979),
                                      ),
                                      TextSpan(
                                          text: '|',
                                          style: StylesUtils.customTextStyle(
                                            color: ColorsUtils.colorCccc,
                                            fontSize: StylesUtils.fontSize12,
                                          )),
                                      TextSpan(
                                          text: '配送￥4起',
                                          style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize12,
                                              color: ColorsUtils.color7979))
                                    ])),
                                  )
                                ],
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                    Align(
                      alignment: Alignment.centerRight,
                      child: Container(
                        width: 167,
                        padding: const EdgeInsets.only(bottom: 10),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10),
                            color: Colors.white),
                        child: Column(
                          children: [
                            Container(
                              constraints: const BoxConstraints.expand(
                                  width: 167, height: 165),
                              decoration: const BoxDecoration(
                                  borderRadius: BorderRadius.vertical(
                                      top: Radius.circular(10)),
                                  image: DecorationImage(
                                      image: NetworkImage(
                                          'https://img2.baidu.com/it/u=4212075512,1580634758&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'),
                                      fit: BoxFit.fill)),
                            ),
                            Container(
                              padding: const EdgeInsets.only(
                                  left: 10, right: 10, top: 15),
                              child: Column(
                                children: [
                                  Align(
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '百事可乐（小杯）',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize15,
                                          fontWeight: FontWeight.w700,
                                          color: ColorsUtils.color0000),
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.symmetric(
                                        vertical: 10),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Text(
                                          '￥ 18',
                                          softWrap: true,
                                          style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize16,
                                              color: ColorsUtils.colorFf64,
                                              fontWeight: FontWeight.w700),
                                        ),
                                        Text(
                                          '月销509',
                                          softWrap: true,
                                          style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.color7979,
                                              fontSize: StylesUtils.fontSize12),
                                        )
                                      ],
                                    ),
                                  ),
                                  Container(
                                    alignment: Alignment.centerLeft,
                                    padding: const EdgeInsets.only(
                                        bottom: 10, top: 5),
                                    child: Text(
                                      '附近热销商品',
                                      softWrap: true,
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color7979,
                                          fontSize: StylesUtils.fontSize12),
                                    ),
                                  ),
                                  Center(
                                    widthFactor: 0.75,
                                    child: Container(
                                      height: 1,
                                      color: HexColor(ColorsUtils.colorF5f5),
                                    ),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(top: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text.rich(TextSpan(children: [
                                      WidgetSpan(
                                          child: SvgUtils.assetName('u988',
                                              width: 12, height: 12),
                                          alignment:
                                              PlaceholderAlignment.middle),
                                      TextSpan(
                                          text: ' 华莱士-凤凰广场2店 ',
                                          style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize12,
                                              color: ColorsUtils.color0000)),
                                      WidgetSpan(
                                          child: Icon(
                                            CupertinoIcons.chevron_forward,
                                            size: 12,
                                            color:
                                                HexColor(ColorsUtils.color9999),
                                          ),
                                          alignment:
                                              PlaceholderAlignment.middle)
                                    ])),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(top: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text.rich(TextSpan(children: [
                                      TextSpan(
                                        text: '20分钟 ',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: StylesUtils.fontSize12,
                                            color: ColorsUtils.color7979),
                                      ),
                                      TextSpan(
                                          text: '|',
                                          style: StylesUtils.customTextStyle(
                                            color: ColorsUtils.colorCccc,
                                            fontSize: StylesUtils.fontSize12,
                                          )),
                                      TextSpan(
                                          text: '配送￥4起',
                                          style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize12,
                                              color: ColorsUtils.color7979))
                                    ])),
                                  )
                                ],
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                    Align(
                      alignment: Alignment.centerLeft,
                      child: Container(
                        width: 167,
                        padding: const EdgeInsets.only(bottom: 10),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10),
                            color: Colors.white),
                        child: Column(
                          children: [
                            Container(
                              constraints: const BoxConstraints.expand(
                                  width: 167, height: 165),
                              decoration: const BoxDecoration(
                                  borderRadius: BorderRadius.vertical(
                                      top: Radius.circular(10)),
                                  image: DecorationImage(
                                      image: NetworkImage(
                                          'https://img2.baidu.com/it/u=2154553597,2576787779&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666'),
                                      fit: BoxFit.fill)),
                            ),
                            Container(
                              padding: const EdgeInsets.only(
                                  left: 10, right: 10, top: 15),
                              child: Column(
                                children: [
                                  Align(
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '百世可乐（中杯）',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize15,
                                          fontWeight: FontWeight.w700,
                                          color: ColorsUtils.color0000),
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.symmetric(
                                        vertical: 10),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Text(
                                          '￥ 18',
                                          softWrap: true,
                                          style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize16,
                                              color: ColorsUtils.colorFf64,
                                              fontWeight: FontWeight.w700),
                                        ),
                                        Text(
                                          '月销509',
                                          softWrap: true,
                                          style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.color7979,
                                              fontSize: StylesUtils.fontSize12),
                                        )
                                      ],
                                    ),
                                  ),
                                  Container(
                                    alignment: Alignment.centerLeft,
                                    padding: const EdgeInsets.only(
                                        bottom: 10, top: 5),
                                    child: Text(
                                      '附近热销商品',
                                      softWrap: true,
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color7979,
                                          fontSize: StylesUtils.fontSize12),
                                    ),
                                  ),
                                  Center(
                                    widthFactor: 0.75,
                                    child: Container(
                                      height: 1,
                                      color: HexColor(ColorsUtils.colorF5f5),
                                    ),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(top: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text.rich(TextSpan(children: [
                                      WidgetSpan(
                                          child: SvgUtils.assetName('u988',
                                              width: 12, height: 12),
                                          alignment:
                                              PlaceholderAlignment.middle),
                                      TextSpan(
                                          text: ' 华莱士-凤凰广场2店 ',
                                          style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize12,
                                              color: ColorsUtils.color0000)),
                                      WidgetSpan(
                                          child: Icon(
                                            CupertinoIcons.chevron_forward,
                                            size: 12,
                                            color:
                                                HexColor(ColorsUtils.color9999),
                                          ),
                                          alignment:
                                              PlaceholderAlignment.middle)
                                    ])),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(top: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text.rich(TextSpan(children: [
                                      TextSpan(
                                        text: '20分钟 ',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: StylesUtils.fontSize12,
                                            color: ColorsUtils.color7979),
                                      ),
                                      TextSpan(
                                          text: '|',
                                          style: StylesUtils.customTextStyle(
                                            color: ColorsUtils.colorCccc,
                                            fontSize: StylesUtils.fontSize12,
                                          )),
                                      TextSpan(
                                          text: '配送￥4起',
                                          style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize12,
                                              color: ColorsUtils.color7979))
                                    ])),
                                  )
                                ],
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
                Container(
                  height: 60,
                  alignment: Alignment.center,
                  child: Text(
                    '我是有底线的...',
                    style: StylesUtils.customTextStyle(
                      color: ColorsUtils.color7979,
                    ),
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}
